<template>    
        <div class="main">
            <div class="logo" style="color:rgb(34,34,34)">装机工单（景天）</div>
            <p class="p">mac码和固话两项如果装移机就不必更改默认值</p>
            <span style="font-weight:bold;color:rgb(34,34,34)">实际安装人（姓名）</span><span style="color:red;">*</span>
            <x-input  class="input" v-model="form.username"    :show-clear="true"  ></x-input> 
            <span style="font-weight:bold;color:rgb(34,34,34)">业务类型</span><span style="color:red;">*</span>
            <checklist  :options="mainList" v-model="mainCheckList" :max=1 @on-change="change"></checklist>

            <div style="margin-top:20px;" v-if="showType">
                <div v-if="showother">
                    <span style="font-weight:bold;color:rgb(34,34,34)">备注</span><span style="color:red;">*</span>
                    <x-textarea class="textarea" v-model="form.other" :show-clear="true" :max=60></x-textarea>
                </div>
                <span style="font-weight:bold;color:rgb(34,34,34)">所用服开账号（姓名）</span><span v-if="showstar" style="color:red;">*</span>
                <x-input  class="input" v-model="form.name"   :show-clear="true"  ></x-input>
                <span style="font-weight:bold;color:rgb(34,34,34)">服开工单号</span><span v-if="showstar" style="color:red;">*</span>
                <x-input  class="input" v-model="form.jobNumber"   :show-clear="true"  ></x-input>
                <span style="font-weight:bold;color:rgb(34,34,34)">宽带账号</span><span v-if="showstar" style="color:red;">*</span>
                <x-input  class="input" v-model="form.kdAcount"   :show-clear="true"  ></x-input>
                <span style="font-weight:bold;color:rgb(34,34,34)">客户姓名</span><span v-if="showstar" style="color:red;">*</span>
                <x-input  class="input" v-model="form.cusName"   :show-clear="true"  ></x-input>
                <span style="font-weight:bold;color:rgb(34,34,34)">客户地址（最多60个字）</span><span v-if="showstar" style="color:red;">*</span>
                <x-input  class="input" v-model="form.address"   :show-clear="true" :max=60  ></x-input>
                <div v-if="showyxfs">
                <span style="font-weight:bold;color:rgb(34,34,34)">营销方式</span><span v-if="showstar" style="color:red;">*</span>
                <checklist :options="marketingModeList" v-model="marketingModeCheckList" :max=1 ></checklist>
                </div>
                <div style="margin-top:20px;"></div>
                <div v-if="showsn">
                    <span style="font-weight:bold;color:rgb(34,34,34);">SN码</span ><span v-if="showyj">（移机）</span><span v-if="showstar" style="color:red;">*</span>
                    <x-input  class="input" v-model="form.SNcode"   :show-clear="true"  ></x-input>
                </div>
                <div v-if="showMAC">
                     <span style="font-weight:bold;color:rgb(34,34,34)">MAC码</span><span v-if="showyj">（移机）</span><span v-if="showdis" style="color:red;">*</span>
                     <x-input  class="input" v-model="form.MACcode"   :show-clear="true"  ></x-input>
                </div>
                <div v-if="showMAC2"> 
                    <span style="font-weight:bold;color:rgb(34,34,34)">MAC码（第二个电视）</span><span v-if="showstar" style="color:red;">*</span>
                    <x-input  class="input" v-model="form.MACcode2"   :show-clear="true"  ></x-input>
                </div>
                <div v-if="showTel">
                    <span style="font-weight:bold;color:rgb(34,34,34)">固话</span><span v-if="showstar" style="color:red;">*</span>
                    <x-input  class="input" v-model="form.tel"   :show-clear="true"  ></x-input>
                </div>
                <div v-if="showazf">
                <span style="font-weight:bold;color:rgb(34,34,34)">安装费（元）</span><span v-if="showstar" style="color:red;">*</span>
                <x-input  class="input" v-model="form.azCost"   :show-clear="true"  ></x-input>
                </div>
                <div v-if="showkdf">
                    <span style="font-weight:bold;color:rgb(34,34,34)">宽带费用（元）</span><span v-if="showstar" style="color:red;">*</span>
                    <x-input  class="input" v-model="form.kdCost"   :show-clear="true"  ></x-input>
                </div>
                <div v-if="showsbf">
                    <span style="font-weight:bold;color:rgb(34,34,34)">设备费（元）</span><span v-if="showstar" style="color:red;">*</span>
                    <checklist :options="equipmentCost" v-model="equipmentCostCheck" :max=1 ></checklist>
                </div>
                <div style="margin-top:20px;"></div>
                <div v-if="showpwf">
                    <span style="font-weight:bold;color:rgb(34,34,34);">皮缆（米）</span><span v-if="showstar" style="color:red;">*</span>
                    <x-input  class="input" v-model="form.ropeLenth"   :show-clear="true"  ></x-input>
                    <span style="font-weight:bold;color:rgb(34,34,34)">尾纤（条）</span><span v-if="showstar" style="color:red;">*</span>
                    <x-input  class="input" v-model="form.fiberLenth"   :show-clear="true"  ></x-input>
                    <div v-if="showfgq">
                        <span style="font-weight:bold;color:rgb(34,34,34)">分光器（请填写9个字）</span><span v-if="showstar" style="color:red;">*</span>
                        <p>例：GJ01-GF01</p>
                        <p>如无分光器请填9个0</p>
                        <x-input  class="input" v-model="form.splitter"   :show-clear="true" :max=9></x-input>
                    </div>
                </div>
                <div v-if="showzffs">
                <span style="font-weight:bold;color:rgb(34,34,34)">支付方式</span><span v-if="showstar" style="color:red;">*</span>
                <checklist :options="pay" v-model="payCheck" :max=1 @on-change="payChange"></checklist> 
                    <div style="margin-top:20px;" v-if="showPay">
                        <span style="font-weight:bold;color:rgb(34,34,34)">流水帐号</span><span v-if="showstar" style="color:red;">*</span>
                        <x-input  class="input" v-model="form.waterAcount"   :show-clear="true"  ></x-input>
                        <span style="font-weight:bold;color:rgb(34,34,34)">流水帐号图片</span><span v-if="showstar" style="color:red;">*</span>

                        <div class="page">
                            <div class="img-main">
                            <div class="img-box" v-if="true">
                                <div class="img-thumbnail thumbnail" :style="{backgroundImage: 'url(' + imgItem + ')' }" v-for="(imgItem, imgIndex) in files" :key="imgIndex" @click.stop="showPicture(imgIndex)">
                                <span class="del" @click.stop="delImg(imgIndex)">
                                    <x-icon style="fill: #b8bdae;" type="ios-close" size="24"></x-icon>
                                </span>
                                </div>
                                <div class="img-thumbnail" v-show="files.length != 9" style="text-align: center;background: #f7f7f7;">
                                <i class="iconfont icon-tainjia upload-icon"></i>
                                <input ref="upload" @change="upload" class="input-img" type="file" accept="image/*" multiple="multiple">
                                </div>
                            </div>
                            </div>
                            <previewer :list="list" ref="previewer" @on-close="list = []"></previewer>
                        </div>

                    </div>
                </div>
                <div style="margin-top:20px;"></div>
                <div v-if="showkdlb">
                    <span style="font-weight:bold;color:rgb(34,34,34)">宽带类别</span><span v-if="showstar" style="color:red;">*</span>
                    <checklist :options="broadBand" v-model="broadBandCheck" :max=1 ></checklist>
                </div>
            </div>
                <x-button @click.native="submit" type="primary">提交</x-button>
        </div>  
</template>

<script>
    import { XHeader, XButton, XInput,Checklist,Icon,Divider, Previewer,XTextarea } from 'vux'
    export default {
        components: {
            XHeader,
            XButton,
            XInput,
            Checklist,
            Icon,
            Divider,
            Previewer,
            XTextarea
        },

        data () {
            return {
                files: [],
                list: [],
                form:{},
                mainCheckList: [],
                mainList: ['宽带+电视','宽带+双电视','新装宽带','宽带+电视+固话','移机','加装电视+固话','宽带+固话','加装电视','加装固话','续约加电视','移机（免费）','宽带+双电视+固话','其他'],
                marketingModeCheckList: [],
                marketingModeList: ['自营','非自营'],
                equipmentCostCheck:[],
                equipmentCost:['0','50','100','150','其他'],
                broadBandCheck:[],
                broadBand:['手宽','裸宽'],
                payCheck:[],
                pay:['支付宝','微信','现金','免费'],
                showother:false,
                showType:false,
                showMAC2:false,
                showMAC:true,
                showkdf:false,
                showTel:false,
                showyj:false,
                showsbf:true,
                showazf:true,
                showsn:true,
                showpwf:true,
                showyxfs:true,
                showzffs:true,
                showkdlb:true,
                showdis:true,
                showfgq:true,
                showstar:true,
                showPay:false,    
            }
        },
        created(){
            
        },
        activated(){
           
        },
        methods: {
            //  查看图片
            showPicture(index) {
            this.files.map(item => {
                this.list.push({ src: item });
            });
            this.$refs.previewer.show(index);
            },
            //  将文件流转化为url
            getUrl(file) {
            return file ? URL.createObjectURL(file) : null;
            },
            //  上传图片
            upload(e) {
            var that = this;
            const files = e.target.files;
            let n = this.files.length;
            let flag = false;
            for (let i = 0; i < files.length; i++) {
                if (i >= 9 - n) {
                flag = true;
                break;
                }
                canvasDataURL(this.getUrl(files[i]), i, {}, (baseUrl, m) => {
                that.files.splice(m + n, 0, baseUrl);
                });
            }
            if (flag) {
                this.$vux.alert.show({
                content: "最多上传9张图片！"
                });
            }
            this.$refs.upload.value = "";
            },
            //  删除图片
            delImg(index) {
            this.files.splice(index, 1);
            },    

           change (val) {
            if(val=="宽带+电视"){
                this.showType=true
            }else{
                this.showType=false  
            }
            if(val=="宽带+双电视"){
                this.showType=true
                this.showMAC2=true
            }else{         
                this.showMAC2=false
            }
            if(val=="新装宽带"){
                this.showType=true
                this.showMAC=false
                this.showkdf=true
            }else{
                this.showMAC=true
                this.showkdf=false
            }
            if(val=="宽带+电视+固话"){
                this.showType=true
                this.showTel=true
            }else{
                this.showTel=false
            }
            if(val=="移机"){
                this.showType=true
                this.showyj=true
                this.showazf=false
                this.showsbf=false
                this.showfgq=false
            }else{
                this.showyj=false
                this.showazf=true
                this.showsbf=true
                this.showfgq=true
            }
            if(val=="加装电视+固话"){
                this.showType=true
                this.showsn=false
                this.showTel=true
                this.showazf=false
                this.showpwf=false
            }else{
                this.showsn=true
                this.showpwf=true
            }
            if(val=="宽带+固话"){
                this.showType=true
                this.showMAC=false
                this.showTel=true
            }
            if(val=="加装电视"){
                this.showType=true
                this.showsn=false
                this.showazf=false
                this.showpwf=false
            }
            if(val=="加装固话"){
                this.showType=true
                this.showyxfs=false
                this.showsn=false
                this.showMAC=false
                this.showazf=false
                this.showsbf=false
                this.showpwf=false
                this.showTel=true
                this.showzffs=false
                this.showkdlb=false
            }else{
                this.showyxfs=true
                this.showzffs=true
                this.showkdlb=true
            }
            if(val=="续约加电视"){
                this.showType=true
                this.showsn=false
                this.showazf=false
                this.showpwf=false
            }
            if(val=="移机（免费）"){
                this.showType=true
                this.showTel=true
                this.showazf=false
                this.showsbf=false
                this.showzffs=false
                this.showdis=false
            }else{
                this.showdis=true
            }
            if(val=="宽带+双电视+固话"){
                this.showType=true
                this.showMAC2=true
                this.showTel=true
            }
            if(val=="其他"){
                this.showType=true
                this.showTel=true
                this.showMAC2=true
                this.showkdf=true
                this.showstar=false
                this.showdis=false
                this.showother=true
            }else{
                this.showstar=true
                this.showother=false
            }          
          },
          payChange(val){
              if(val=="支付宝"||val=="微信"){
                this.showPay=true
            }else{
               this.showPay=false 
            }
          },
          submit(){
                if(!this.form.username){
                    this.toastFail("请填写实际安装人（姓名）","160px")
                    return
                }
                if(this.form.mainCheckList==""){
                    this.toastFail("请选择业务类型","160px")
                    return
                }
                if(!this.form.name){
                        this.toastFail("请填写所开服账号（姓名）","160px")
                        return
                }
                if(!this.form.jobNumber){
                        this.toastFail("请填写服开工单号","160px")
                        return
                }
                if(!this.form.kdAcount){
                        this.toastFail("请填写宽带账号","160px")
                        return
                }
                if(!this.form.cusName){
                        this.toastFail("请填写客户姓名","160px")
                        return
                }
                if(!this.form.address){
                        this.toastFail("请填写客户地址","160px")
                        return
                }
                if(this.form.mainCheckList=="宽带+电视"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                        }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(!this.form.azCost){
                        this.toastFail("请填写安装费","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                            this.toastFail("请填写设备费","160px")
                            return
                        }
                    if(!this.form.ropeLenth){
                            this.toastFail("请填写皮缆（米）","160px")
                            return
                        }
                        if(!this.form.fiberLenth){
                            this.toastFail("请填写尾纤（条）","160px")
                            return
                        }
                    if(!this.form.splitter){
                            this.toastFail("请填写分光器","160px")
                            return
                        }
                    if(this.form.payCheck==""){
                            this.toastFail("请填写支付方式","160px")
                            return
                        }
                        if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                            if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                            }
                            if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                        }
                    if(this.form.broadBandCheck==""){
                            this.toastFail("请填写宽带类别","160px")
                            return
                        }
                }
                if(this.form.mainCheckList=="宽带+双电视"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                    }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(!this.form.MACcode2){
                        this.toastFail("请填写MAC码（第二个电视）","160px")
                        return
                    }
                    if(!this.form.azCost){
                        this.toastFail("请填写安装费","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    if(!this.form.ropeLenth){
                        this.toastFail("请填写皮缆（米）","160px")
                        return
                    }
                    if(!this.form.fiberLenth){
                        this.toastFail("请填写尾纤（条）","160px")
                        return
                    }
                    if(!this.form.splitter){
                        this.toastFail("请填写分光器","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="新装宽带"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                    }
                    if(!this.form.azCost){
                        this.toastFail("请填写安装费","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    if(!this.form.ropeLenth){
                        this.toastFail("请填写皮缆（米）","160px")
                        return
                    }
                    if(!this.form.fiberLenth){
                        this.toastFail("请填写尾纤（条）","160px")
                        return
                    }
                    if(!this.form.splitter){
                        this.toastFail("请填写分光器","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="宽带+电视+固话"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                    }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(!this.form.tel){
                        this.toastFail("请填写固话","160px")
                        return
                    }
                    if(!this.form.azCost){
                        this.toastFail("请填写安装费","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    if(!this.form.ropeLenth){
                        this.toastFail("请填写皮缆（米）","160px")
                        return
                    }
                    if(!this.form.fiberLenth){
                        this.toastFail("请填写尾纤（条）","160px")
                        return
                    }
                    if(!this.form.splitter){
                        this.toastFail("请填写分光器","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="移机"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                    }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(!this.form.ropeLenth){
                        this.toastFail("请填写皮缆（米）","160px")
                        return
                    }
                    if(!this.form.fiberLenth){
                        this.toastFail("请填写尾纤（条）","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="加装电视+固话"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(!this.form.tel){
                        this.toastFail("请填写固话","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="宽带+固话"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                    }
                    if(!this.form.tel){
                        this.toastFail("请填写固话","160px")
                        return
                    }
                    if(!this.form.azCost){
                        this.toastFail("请填写安装费","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    if(!this.form.ropeLenth){
                        this.toastFail("请填写皮缆（米）","160px")
                        return
                    }
                    if(!this.form.fiberLenth){
                        this.toastFail("请填写尾纤（条）","160px")
                        return
                    }
                    if(!this.form.splitter){
                        this.toastFail("请填写分光器","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="加装电视"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="加装固话"){
                    if(!this.form.tel){
                        this.toastFail("请填写固话","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="续约加电视"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="移机（免费）"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                    }
                    if(!this.form.tel){
                        this.toastFail("请填写固话","160px")
                        return
                    }
                    if(!this.form.ropeLenth){
                        this.toastFail("请填写皮缆（米）","160px")
                        return
                    }
                    if(!this.form.fiberLenth){
                        this.toastFail("请填写尾纤（条）","160px")
                        return
                    }
                    if(!this.form.splitter){
                        this.toastFail("请填写分光器","160px")
                        return
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                if(this.form.mainCheckList=="宽带+双电视+固话"){
                    if(this.form.marketingModeCheckList==""){
                        this.toastFail("请填写营销方式","160px")
                        return
                    }
                    if(!this.form.SNcode){
                        this.toastFail("请填写SN码","160px")
                        return
                    }
                    if(!this.form.MACcode){
                        this.toastFail("请填写MAC码","160px")
                        return
                    }
                    if(!this.form.MACcode2){
                        this.toastFail("请填写MAC码（第二个电视）","160px")
                        return
                    }
                    if(!this.form.tel){
                        this.toastFail("请填写固话","160px")
                        return
                    }
                    if(!this.form.azCost){
                        this.toastFail("请填写安装费","160px")
                        return
                    }
                    if(this.form.equipmentCostCheck==""){
                        this.toastFail("请填写设备费","160px")
                        return
                    }
                    if(!this.form.ropeLenth){
                        this.toastFail("请填写皮缆（米）","160px")
                        return
                    }
                    if(!this.form.fiberLenth){
                        this.toastFail("请填写尾纤（条）","160px")
                        return
                    }
                    if(!this.form.splitter){
                        this.toastFail("请填写分光器","160px")
                        return
                    }
                    if(this.form.payCheck==""){
                        this.toastFail("请填写支付方式","160px")
                        return
                    }
                    if(this.form.payCheck=="支付宝"||this.form.payCheck=="微信"){
                        if(!this.form.waterAcount){
                            this.toastFail("请填写流水账号","160px")
                            return
                        }
                        if(this.files==""){
                            this.toastFail("请填写流水账号图片","160px")
                            return
                            }
                    }
                    if(this.form.broadBandCheck==""){
                        this.toastFail("请填写宽带类别","160px")
                        return
                    }
                }
                
                this.$vux.loading.show()
                let params = {}
                 params = this.deepClone(this.form)
                params.broadBandCheck = this.broadBandCheck[0]
                params.equipmentCostCheck = this.equipmentCostCheck[0]
                params.mainCheckList = this.mainCheckList[0]
                params.marketingModeCheckList = this.marketingModeCheckList[0]
                params.payCheck = this.payCheck[0]
                console.log(this.files)
                this.files.map((item, index) => {
                    index++
                    params['file' + index] = item
                })
                console.log(params)

                this.$post("/anapi/WxInstallController/addOne",params,()=>{
                  //  this.$router.replace('')
                  this.$vux.alert.show({
                        title: '提示',
                        content: '提交成功',
                        onShow () {},
                        onHide () {}
                    })
                    this.form.username = ""
                    this.form.name = ""
                    this.form.other = ""
                    this.form.jobNumber = ""
                    this.form.kdAcount = ""
                    this.form.cusName = ""
                    this.form.address = ""
                    this.form.SNcode = ""
                    this.form.MACcode = ""
                    this.form.azCost = ""
                    this.form.ropeLenth = ""
                    this.form.fiberLenth = ""
                    this.form.splitter = ""
                    this.form.waterAcount = ""
                    this.form.MACcode2 = ""
                    this.form.tel = ""
                    this.form.kdCost = ""
                    this.mainCheckList = []
                    this.broadBandCheck = []
                    this.equipmentCostCheck = []
                    this.marketingModeCheckList = []
                    this.payCheck = []
                    this.files = []
                })
                
            },
          
        },
    }
    //  压缩图片
function canvasDataURL(path, i, obj, callback) {
  var img = new Image();
  img.src = path;
  img.onload = function() {
    var that = this;
    // 默认按比例压缩
    var w = that.width,
      h = that.height;
    var quality = 0.9;
    //生成canvas
    var canvas = document.createElement("canvas");
    canvas.width = w;
    canvas.height = h;
    var ctx = canvas.getContext("2d");
    //获取图片方向
    var orient;
    EXIF.getData(img, function() {
      orient = EXIF.getTag(this, "Orientation");
      //如果图片方向等于6 ，则旋转矫正，反之则不做处理
      if (orient == 6) {
        canvas.width = h;
        canvas.height = w;
        ctx.save();
        ctx.rotate((90 * Math.PI) / 180);
        ctx.drawImage(img, 0, -h);
        ctx.restore();
      } else {
        ctx.drawImage(img, 0, 0, w, h);
      }
      // ctx.drawImage(that, 0, 0, w, h);
      // 图像质量
      if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
        quality = obj.quality;
      }
      // quality值越小，所绘制出的图像越模糊
      var base64 = canvas.toDataURL("image/jpeg", quality);
      // 回调函数返回base64的值
      callback(base64, i);
    });
  };
}
</script>

<style lang="less" scoped>
    .main{
        padding: 20px;
        .logo{
            font-size: 26px;
            text-align: center;
        }
        .input{
            border: 1px solid rgb(214, 212, 212);
            width: 100%;
            height: 35px;
            padding: 0px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .textarea{
            border: 1px solid rgb(214, 212, 212);
            margin-bottom: 20px;

        }
        .p{
          margin-bottom: 20px;
        }
        .img-main {
            font-size: 12px;
            background: #f5f5f5;
            overflow: auto;  
            }
            .img-box {
            overflow: hidden;
            padding: 10px 10px;
            position: relative;
            min-height: 100px;
            background: #fff;
            .img-thumbnail {
                width: 97px;
                height: 97px;
                border: 1px solid #ddd;
                position: relative;
                float: left;
                margin-right: 8px;
                margin-bottom: 10px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: bottom;
                &:nth-of-type(3n) {
                margin-right: 0;
                }
                .del {
                position: absolute;
                top: 0;
                right: 0;
                }
                .upload-icon {
                font-size: 60px;
                color: #ccc;
                line-height: 100px;
                }
            }
            .input-img {
                opacity: 0;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
            }
            }
        
    }
</style>



